<template>
    <div>
        <div class="bread">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/sms/coupon' }">
                    营销
                </el-breadcrumb-item>
                <el-breadcrumb-item>优惠价列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">

            <el-card class="box-card">
                <div class="card-header">
                    <div>
                        <el-icon style="margin-top">
                            <Search />
                        </el-icon>
                        <span>数据列表</span>
                    </div>
                    <div>
                        <el-button class="button" @click="onShowEdit">重置</el-button>
                        <el-button class="button" type="primary" @click="onSearch">查询搜索</el-button>
                    </div>
                </div>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="优惠券名称：">
                        <el-input placeholder="优惠卷名称" v-model="searchval" />
                    </el-form-item>
                    <el-form-item label="优惠券类型：">
                        <el-select class="m-2" v-model="value" placeholder="全部">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
        <el-card class="box-card">
            <div class="card-header">
                <div>
                    <el-icon style="margin-top">
                        <Tickets />
                    </el-icon>
                    <span>数据列表</span>
                </div>
                <el-button class="button" @click="addCoupon">添加</el-button>
            </div>
        </el-card>
        <el-table :data="tableData" style="width: 100%" :border="true" :key="tablekey">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="id" label="编号" width="70" />
            <el-table-column prop="name" width="150" label="优惠卷名称" />
            <el-table-column label="优惠卷类型" width="130">
                <template #default="scope">
                    <div>{{ types[scope.row.type].coupon }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="可使用商品" width="130">
                <template #default="scope">
                    <div>{{ types[scope.row.useType].goods }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="note" label="使用门槛" width="150">
                <template #default="scope">
                    <div>满{{ scope.row.minPoint }}可用</div>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="面值" width="100">
                <template #default="scope">
                    <div>{{ scope.row.amount }}元</div>
                </template>
            </el-table-column>
            <el-table-column label="适用平台" width="100">
                <template #default="scope">
                    <div>全平台</div>
                </template>
            </el-table-column>
            <el-table-column label="有效期" width="200">
                <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
                <template #default="scope">
                    <div>
                        {{ scope.row.endTime
                            ? dayjs(scope.row.endTime
                            ).format('YYYY-MM-DD HH:mm:ss') : '/' }}至
                        {{ scope.row.enableTime
                            ? dayjs(scope.row.enableTime
                            ).format('YYYY-MM-DD HH:mm:ss') : '/' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" width="130">
                <template #default="scope">
                    <div>已过期</div>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="Operations" width="200">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="onLookcoupon(scope.row)">查看</el-button>
                    <el-button link type="primary" size="small" @click="onRouterupDAte(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="delVal(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="footer" style="margin-top: 30px;">


        <!-- 分页器 -->
        <el-pagination style="float: right;" v-model:current-page="pagination.pageNum"
            v-model:page-size="pagination.pageSize" background :page-sizes="[1, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from "vue"
import { Tickets, Search } from '@element-plus/icons-vue'
import useTable from '../../hooks/useTables'
import * as api from '../../json/request/api'
// import Edit from "./Components/Edit.vue"
import type { Ref } from "vue"
import { IAddReturnGoods } from "../../json/request/QmsAdminConreiller/index"
import { useRouter } from 'vue-router'
import type { IAddCouponData, IAdminListRes } from "../../json/request/QmsAdminConreiller/index"
import { ElMessage, ElMessageBox } from 'element-plus'

// 批量处理的数据绑定
const value = ref('')
// 表单元素
let formData = ref({}) as Ref<IAddReturnGoods>
// 搜索框内容
let searchval = ref("")

// 路由跳转
let router = useRouter()
// 分页器

let tableData: any, pagination: any, handleSizeChange: any, handleCurrentChange: any

function fen(type: number, val?: { name: string | Ref<string>, type: string | Ref<string> }) {
    let obj = useTable(api.admin.couponCouponsList,
        type === 0 ? undefined : {
            name: val?.name,
            type: val?.type
        }
    )

    tableData = obj.tableData
    pagination = obj.pagination
    handleSizeChange = obj.handleSizeChange
    handleCurrentChange = obj.handleCurrentChange
    console.log(tableData);


}
fen(0)
let options = [
    {
        value: "全场赠卷",
        label: '全场赠卷'
    }, {
        value: "会员赠卷",
        label: '会员赠卷'
    }, {
        value: "购物赠卷",
        label: '购物赠卷'
    }, {
        value: "注册赠卷",
        label: '注册赠卷'
    }
]

let types = [
    {
        coupon: '全场赠券',
        goods: '全场通用',
        terrace: "全平台"
    }, {
        coupon: '会员赠券',
        goods: '指定分类',
        terrace: "移动平台"
    }, {
        coupon: '购物赠券',
        goods: '指定商品',
        terrace: "PC平台"
    }, {
        coupon: '注册赠券'
    }
]

let add = true
// 重置
let onShowEdit = () => {
    searchval.value = ''
    value.value = ''
}
let tablekey = ref(1)
// 查询搜索
let onSearch = () => {
    let num = options.findIndex((item) => {
        return item.value === value.value
    })
    console.log(num);

    fen(1, { name: searchval, type: (num == -1 ? '' : num).toString() })
    tablekey.value++
}

// 添加
let addCoupon = () => {
    router.push("/sms/addCoupon")
}

// 查看
let onLookcoupon = (row: IAddCouponData) => {
    router.push(`/sms/couponHistory?id=${row.id}`)
}


// 编辑
let onRouterupDAte = (row: IAddCouponData) => {
    router.push(`/sms/updateCoupon?id=${row.id}`)
}

// 删除
let delVal = (val: IAddCouponData) => {

    ElMessageBox.confirm(
        '是否确认提交!', "提示",
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            await api.admin.delCouponItem(Number(val.id))
            onSearch()

            ElMessage({
                type: 'success',
                message: '操作成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
</script>

<style scoped lang="scss">
.bread {
    // position: fixed;
    width: 100%;
    z-index: 999;
    background-color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.card {
    margin-top: 60px;
    margin-bottom: 30px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.demo-form-inline {
    float: left;
    padding: 20px;
}


:deep .cell {
    text-align: center;
}
</style>